<template>
	<view class="page" style="background-color: #FFFFFF;" v-if="headerSelectValue" @click="cancelOpenMore">
		<view class="market-header transition-point-three bg-white" :style="headerSelecting ? 'height:'+((headerList.length + 1)*66 + 4) + 'rpx' : 'height: 70rpx'"
		 @click="headerClick">
			<view class="header-selected">{{headerSelectValue.name}}</view>
			<view class="header-item" v-for="(item, index) in headerList" :key="index" @click.stop="headerItemClick(item)"></view>
			<view :class="first ? 'sanjiaoOri' : (headerSelecting ? 'sanjiao' : 'sanjiao2')"></view>
		</view>
		<view class="bg-white" v-if="data.length > 0" style="position: relative;top: 130rpx;min-height: calc(100vh - 130rpx);">
			<view class="coupon-header bg-white">
				<view class="header-title">优惠券名称</view>
				<view class="header-useday">使用时间</view>
				<view class="header-usestate">已使用数量</view>
				<!-- <view class="header-status">状态</view> -->
				<!-- <view class="header-more">更多</view> -->
			</view>
			<view class="bg-white" style="height: calc(100vh - 130rpx);position: relative;top: 60rpx;">
				<scroll-view scroll-y="true" style="height: calc(100vh - 130rpx);">
					<view class="coupon-item f-row" v-for="(item, index) in data" :key="index">
						<view class="coupon-title single-text">{{item.title}}</view>
						<view class="coupon-useday single-text">{{item.coupon_time}}天</view>
						<view class="coupon-usestate single-text">{{item.used_num}}</view>
<!-- 						<view class="coupon-status single-text">
							<switch :checked="item.status == 1 ? true : false" @change="switchChange($event, index)"></switch>
						</view>
						<view class="coupon-more">
							<view class="dot-cotainer" @click.stop="openMoreClick(index)">
								<view class="dot"></view>
								<view class="dot"></view>
								<view class="dot"></view>
							</view>
							<view class="openmore f-column transition-point-three" :style="openMore == index ? 'height:60rpx;opacity:1' : 'height:0;overflow:hidden;opacity:1'">
								<view class="operation-item f-row">
									<image mode="aspectFill" src="../../static/icons/edit.png"></image>
									<view class="operation-item-text">编辑</view>
								</view>
							</view>
						</view> -->
					</view>
				</scroll-view>
			</view>
		</view>
		<loading-more :statusObject="statusObject" @reload="reload"></loading-more>
	</view>
</template>

<script>
	let _this;
	import loadingMore from '../../components/loading-more.vue';
	import MARKET from '../../api/market.js'
	export default {
		components: {
			loadingMore
		},
		data() {
			return {
				data: [],
				headerList: [{
						name: '优惠券列表'
					},
					{
						name: '优惠券列表'
					},
					{
						name: '优惠券列表'
					},
					{
						name: '优惠券列表'
					},
				],
				headerSelecting: false,
				headerSelectValue: false,
				first: true,
				openMore: -1,
				statusObject: {status : 0},
			}
		},
		onLoad() {
			_this = this;
			_this.headerSelectValue = _this.headerList[0];
			_this.requestData();
		},
		methods: {
			reload() {
				_this.data = [];
				_this.page = 1;
				_this.requestData();
			},
			headerClick() {
				if (_this.first) _this.first = false;
				_this.headerSelecting = _this.headerSelecting ? false : true;
			},
			headerItemClick(item) {
				_this.headerSelectValue = item;
			},
			requestData() {
				MARKET.couponLst().then((res) => {
					console.log(res);
					_this.data = _this.data.concat(res.list);
					if(res.data.data.count == 0) {
						_this.statusObject = {
							status: 1
						}
					}
					else if (_this.data.length == res.count) {
						_this.statusObject = {
							status: 2
						}
						_this.page += 1;
					} else {
						_this.statusObject = {
							status: 3
						}
						_this.page += 1;
					}
				}).catch((err) => {
					_this.statusObject = {
						status: -1
					}
					console.log(err);
				})
			},
			openMoreClick(index) {
				_this.openMore = index;
			},
			cancelOpenMore() {
				_this.openMore = -1;
			}
			// switchChange(e, index) {
			// 	_this.data[index].status = e.target.value ? 1 : 0;
			// }
		}
	}
</script>

<style>
	.market-header {
		box-sizing: border-box;
		border: 2rpx solid #e8e8e8;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		z-index: 99;
	}

	.header-selected,
	.header-item {
		height: 66rpx;
		line-height: 66rpx;
		text-align: center;
	}

	.coupon-item {
		height: 100rpx;
		border-bottom: 2rpx solid #e8e8e8;
	}

	.coupon-header {
		position: fixed;
		top: 70rpx;
		left: 0;
		right: 0;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		z-index: 98;
		box-sizing: border-box;
		border-bottom: 2rpx solid #e8e8e8;
	}
	.header-title,
	.header-useday,
	.header-usestate,
	.header-status,
	.header-more {
		height: 58rpx;
		line-height: 58rpx;
		font-size: 24rpx;
		text-align: center;
		position: relative;
	}
	.coupon-title,
	.coupon-useday,
	.coupon-usestate,
	.coupon-status,
	.coupon-more{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 24rpx;
		text-align: center;
		position: relative;
	}

	.coupon-header view {
		font-size: 26rpx;
	}

	.header-title,
	.coupon-title {
		/* width: 250rpx; */
		flex: 1;
	}

	.header-useday,
	.coupon-useday {
		width: 150rpx;
	}

	.header-usestate,
	.coupon-usestate {
		width: 200rpx;
	}

	.coupon-status,
	.header-status {
		width: 80rpx;
	}

	.coupon-status {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.coupon-status switch {
		transform: scale(0.8);
	}

	.coupon-more,
	.header-more {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dot-cotainer {
		position: relative;
		display: flex;
		flex-direction: row;
	}

	.dot {
		height: 8rpx;
		width: 8rpx;
		border-radius: 50%;
		background-color: #aaaaaa;
		margin: 0 2rpx;
	}

	.operation-item {
		height: 60rpx;
		width: 100%;
	}

	.operation-item image {
		height: 40rpx;
		width: 40rpx;
		margin: 10rpx;
	}

	.operation-item-text {
		line-height: 60rpx;
		height: 60rpx;
		flex: 1;
		font-size: 22rpx;
		text-align: center;
	}
	
	.openmore {
		position: absolute;
		width: 200rpx;
		height: auto;
		box-shadow: 2rpx 2rpx 4rpx #dfdfdf, -2rpx -2rpx 4rpx #dfdfdf;
		border-radius: 7px;
		/*圆角弧度为7px*/
		z-index: 999;
		top: 60rpx;
		right: 50rpx;
		background-color: #FFFFFF;
	}
	
	.openmore::before {
		content: '';
		width: 0;
		height: 0;
		border: 20rpx solid;
		position: absolute;
		top: -40rpx;
		right: 30rpx;
		border-color: transparent transparent #e8e8e8;
	}
	
	.openmore::after {
		content: '';
		width: 0;
		height: 0;
		border: 20rpx solid;
		position: absolute;
		top: -37rpx;
		right: 30rpx;
		border-color: transparent transparent #FFF;
	}
	
</style>
